<template>
    <l-layout class="l-tab-page" v-if="!lr_loadPage" >
        <template #left>
            <l-panel :title="$t('功能目录')" style="padding-right:0;" >
                <el-tree class="learun-tree" v-loading="loading" :data="modulesTree" :expand-on-click-node="false"  @node-click="handleNodeClick">
                    <span class="lr-tree-node"  slot-scope="{ node, data }">
                        <i :class="data.icon"></i>
                        {{ $t(node.label) }}
                    </span>
                </el-tree>
            </l-panel>
        </template>
        <l-panel style="padding-left:0;" >
            <template #toolLeft >
                <div class="l-panel--item" >
                    <el-input :placeholder="$t('请输入名称')"  @keyup.enter.native="hanleSearch" v-model="searchWord" size="mini" >
                        <el-button @click="hanleSearch" slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
            </template>
            <template #toolRight >
                <l-tool-btns :hasAdd="false"  >
                    <l-excel-btns></l-excel-btns>
                </l-tool-btns>
            </template>
            <l-table :columns="columns" :dataSource="searchTableData || tableData" :loading="loading" >
                <l-table-btns :btns="tableBtns" @click="lr_handleTableBtnClick" ></l-table-btns>
            </l-table>
        </l-panel>

        <l-dialog 
            :title="formTitle"
            :visible.sync="formVisible"
            :width="500"
            :height="columns.length * 48 + 88"
            @ok="handleSave"
            @close="handleCloseForm"
            @opened="handleOpenedForm"
            >
            <my-form ref="form"></my-form>       
        </l-dialog>
    </l-layout>
</template>

<script>
import { mapGetters } from "vuex"
const api = window.$api.language.mapping
const apiModule = window.$api.system.module
import MyForm from './form'
export default {
    inject: ["admin"],
    components: {
        MyForm
    },
    data () {
        return {
            lr_isPage:true,
            //查询
            loading:false,
            tableBtns:[
                {prop:'Edit',label:this.$t('编辑'),width:60}
            ],
            tableData:[],
            searchWord:'',
            searchTableData:null,

            currentModuleId:'0',
            formVisible:false,
            formTitle:'',
            formEditRow:null
        };
    },
    computed:{
        ...mapGetters(["modulesTree","modulesGroup","modules"]),
        typeList(){
            return this.$store.state.language.type.list
        },
        mainType(){
            return this.appConfig.language.mainType
        },
        columns(){
            const _columns = []
            this.typeList.forEach(item => {
                _columns.push({label:item.f_Name,prop:item.f_Code,minWidth:'120'})
            })
            return _columns
        }
    },
    mounted () {
        this.updateModules()
    },
    methods:{
        async updateModules(){
            this.loading = true
            await this.$store.dispatch("system/module/getList")
            await this.loadTableData('0')
            this.loading = false
        },
        async loadTableData(moduleId){
            const _tableData = []
            const mappingDic = {}
            const modules = this.modulesGroup[moduleId] || []
            if(modules.length > 0){
                // 获取翻译数据
                const mappingData =await this.$awaitWraper(api.getModuleList(moduleId,1))
                mappingData.forEach(row=>{
                    mappingDic[row[this.mainType]] = row
                })
                modules.forEach(item => {
                    if(mappingDic[item.f_FullName]){
                        _tableData.push(mappingDic[item.f_FullName])
                    }
                    else{
                        const _row = {}
                        _row[this.mainType] = item.f_FullName
                        _tableData.push(_row)
                    }
                })
            }
            else {
                const module = this.modules.find(t=>t.f_ModuleId == moduleId)
                
                if(module && ['view','custmerForm'].includes(module.f_Target)){
                    // 获取翻译数据
                    const mappingData2 =await this.$awaitWraper(api.getModuleList(moduleId,0))
                    mappingData2.forEach(row=>{
                        mappingDic[row[this.mainType]] = row
                    })
                    const entity = await this.$awaitWraper(apiModule.get(moduleId))
                    entity.buttons.forEach(item=>{
                        if(_tableData.findIndex(t=>t[this.mainType] == item.f_FullName) == -1){
                            if(mappingDic[item.f_FullName]){
                                _tableData.push(mappingDic[item.f_FullName])
                            }
                            else{
                                const _row = {}
                                _row[this.mainType] = item.f_FullName
                                _tableData.push(_row)
                            }
                        }
                        
                    })
                    entity.columns.forEach(item=>{
                        if(_tableData.findIndex(t=>t[this.mainType] == item.f_FullName) == -1){
                            if(mappingDic[item.f_FullName]){
                                _tableData.push(mappingDic[item.f_FullName])
                            }
                            else{
                                const _row = {}
                                _row[this.mainType] = item.f_FullName
                                _tableData.push(_row)
                            }
                        }
                    })
                    entity.forms.forEach(item=>{
                        let mainName = item.f_FullName
                        const mainNames = mainName.split('-')
                        if(mainNames.length > 1){
                            mainName = mainNames[mainNames.length -1]
                        }

                        if(_tableData.findIndex(t=>t[this.mainType] == mainName) == -1){
                            if(mappingDic[mainName]){
                                _tableData.push(mappingDic[mainName])
                            }
                            else{
                                const _row = {}
                                _row[this.mainType] = mainName
                                _tableData.push(_row)
                            }
                        }
                    })
                }
            }
            this.tableData = _tableData
        },
        async handleNodeClick(data) {
            this.loading = true
            this.currentModuleId = data.id
            await this.loadTableData(data.id)
            this.loading = false
        },
        hanleSearch(){
            if(this.searchWord){
                this.searchTableData = this.tableData.filter(item => item[this.mainType].indexOf(this.searchWord) >-1)
            }
            else{
                this.searchTableData = null
            }
        },
        handleEdit($index,row){
            this.formEditRow = row
            this.showForm('编辑翻译')
        },
        handleSave(showLoading,hideLoading){
            if(this.$refs.form.validateForm()){
                const formData = this.$refs.form.getForm()
                showLoading()
                if(this.formEditRow.f_code){// 修改数据
                    api.update(this.formEditRow.f_code,formData).then(()=> {
                        hideLoading()
                        this.formVisible = false
                        this.loadTableData(this.currentModuleId)
                    }).catch(() => {
                        hideLoading()
                    })
                }
                else{// 新增数据
                    api.add(formData).then(()=> {
                        hideLoading()
                        this.formVisible = false
                        this.loadTableData(this.currentModuleId)
                    }).catch(() => {
                        hideLoading()
                    })
                }
            }    
        },
        handleOpenedForm(){
            this.$refs.form.setForm(this.$deepClone(this.formEditRow))
        },
        handleCloseForm(){
            this.$refs.form.resetForm()
        },
        showForm(text){
            this.formTitle = text
            this.formVisible = true
        }
    }
}
</script>
